<template>
  <div class="login-page">
      <!-- 背景层 -->
      <div class="background"></div>

      <!-- 登录框 -->
      <div class="login-box">
        <el-tabs v-model="activeTab" type="border-card" class="login-tabs">
          <!-- 账号密码登录 -->
          <el-tab-pane label="账号密码登录" name="account">
            <el-form :model="accountForm" :rules="accountRules" ref="accountForm">
              <el-form-item prop="username">
                <el-input v-model="accountForm.shopPhone" placeholder="请输入商家名称" prefix-icon="el-icon-user"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input v-model="accountForm.shopPass" type="password" placeholder="请输入密码" prefix-icon="el-icon-lock"></el-input>
              </el-form-item>
              <el-button type="primary" class="submit-button" @click="submitAccountForm">登录</el-button>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
</template>

<script>
export default {
  data() {
    return {

      activeTab: "account", // 默认显示账号密码登录
      accountForm: {
        shopPhone: "",
        shopPass: "",
      },
      sendingCode: false, // 是否在发送验证码
      countdown: 60, // 验证码倒计时
      timer: null, // 定时器
      accountRules: {
        shopPhone: [{ required: true, message: "请输入账号", trigger: "blur" }],
        shopPass: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitAccountForm() {
  // 验证表单
  this.$refs.accountForm.validate(async (valid) => {
    if (!valid) {
      this.$message.error("请填写完整表单！");
      return;
    }
      // 调用后端接口
      this.$http.post("/market/shopInfo/shopInfoLogin", this.accountForm).then((resp)=>{
        if (resp.data.success) {
                  this.$message.success("登录成功！");
                  // 保存用户信息或跳转页面
                      // 保存用户信息或跳转页面
              localStorage.setItem("token", resp.headers.token);
              this.$router.push("/shophome"); // 示例：跳转到主页面
                } else {
                  this.$message.error(resp.data.message || "登录失败！");
                }
      })
  });
},
    submitPhoneForm() {
      this.$refs.phoneForm.validate((valid) => {
        if (valid) {
          this.$message.success("手机号登录成功！");
          // 调用后端接口逻辑
        } else {
          this.$message.error("请填写完整表单！");
        }
      });
    },
    sendCode() {
      if (this.sendingCode) return;
      if (!/^1[3-9]\d{9}$/.test(this.phoneForm.phone)) {
        this.$message.error("请输入正确的手机号！");
        return;
      }
      this.sendingCode = true;
      this.countdown = 60;
      this.$message.success("验证码已发送！");
      this.timer = setInterval(() => {
        this.countdown -= 1;
        if (this.countdown === 0) {
          clearInterval(this.timer);
          this.sendingCode = false;
        }
      }, 1000);
    }
  },
  destroyed() {
    if (this.timer) clearInterval(this.timer);
  },
};
</script>

<style scoped>
/* 页面布局 */
.login-page {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: "Arial", sans-serif;
}

/* 背景层 */
.background {
position: absolute;
width: 100%;
height: 100%;
/* background: url('movie-background.jpg') no-repeat center center / cover; */
filter: blur(10px) brightness(0.8);
z-index: -1;
}

/* 登录框样式 */
.login-box {
  width: 350px;
  padding: 20px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  text-align: center;
  transition: all 0.3s ease;

  /* 添加居中样式 */
  position: absolute; /* 绝对定位 */
  top: 50%; /* 距离顶部 50% */
  left: 50%; /* 距离左边 50% */
  transform: translate(-50%, -50%); /* 偏移自身宽高的一半 */
}

/* Tab 样式 */
.login-tabs {
margin-top: 30px;
}

/* 提交按钮
.submit-button {
width: 100%;
background: linear-gradient(135deg, #6a11cb, #2575fc);
color: #fff;
border: none;
font-weight: bold;
border-radius: 10px;
transition: all 0.3s ease;
}

.submit-button:hover {
background: linear-gradient(135deg, #2575fc, #6a11cb);
}

/* 验证码按钮 */
.send-code-button {
color: #409eff;
font-size: 12px;
padding: 0;
}

/* QQ 登录按钮 */
.qq-login-button {
width: 100%;
background: #3b5998;
color: #fff;
border-radius: 10px;
transition: all 0.3s ease;
}

.qq-login-button:hover {
background: #2d4373;
}
</style>